<!--  -->
<template>
    <div class=''>
        <el-form :model="form" label-width="auto" ref="form" style="max-width: 600px">
            <el-form-item label="业务员名称" prop="personName" :rules="[
                { required: true, message: '请输入业务员名称', trigger: 'blur' },
            ]">
                <el-input v-model="form.personName" :disabled="disabled" />
            </el-form-item>
            <el-form-item label="性别" prop="personGender" :rules="[
                { required: true, message: '请选择性别', trigger: 'blur' },
            ]">
                <el-radio-group v-model="form.personGender" :disabled="disabled">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="2">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="电话" prop="personMobile" :rules="[
                { required: true, message: '请输入电话', trigger: 'blur' }
            ]">
                <el-input v-model="form.personMobile" :disabled="disabled" />
            </el-form-item>
            <el-form-item label="城市" prop="areaIds" :rules="[
                { required: true, message: '请选择城市', trigger: 'blur' }
            ]">
                <el-checkbox-group v-model="form.areaIds" :disabled="disabled">
                    <el-checkbox v-for="(item, index) in checkBoxOptions" :key="index" :label="item.appid">
                        {{ item.areaName }}
                    </el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="头像">
                <div style="width: 200px; height: 200px" v-show="form.personAvatarImg">
                    <img :src="form.personAvatarImg" style="width: 100%; height: 100%">
                </div>
                <el-button type="primary" v-if="!disabled" style="margin: 5px;" size="small" @click="openImage">
                    选择图片
                </el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit" v-if="!disabled" v-loading="loading">保存</el-button>
                <el-button @click="handlerCancel">取消</el-button>
            </el-form-item>
        </el-form>
        <!-- 上传 -->
        <Upload v-if="isProductUpload" :config="config" :isupload="isProductUpload" @returnImgs="returnProductImgsFunc">
            上传图片
        </Upload>
    </div>
</template>

<script>
import SalesApi from '@/api/sales'
import { useCascaderAreaData } from '@/utils/area'
import Upload from "@/components/file/Upload.vue";
import { ElMessage } from 'element-plus'
export default {
    name: 'SaleeManDetailForm',
    props: {
        formType: {
            type: String,
            default: 'add'
        }
    },
    components: {
        Upload
    },
    data() {
        return {
            isProductUpload: false,
            config: {},
            imageUrl: '',
            form: {
                personId: '',
                personName: '',
                personMobile: '',
                personAvatar: '',
                personAvatarImg: '',
                personGender: 1,
                areaIds: []

            },
            loading: false,
            imageInfo: {},
            disabled: false,
            defaultData: useCascaderAreaData(),
            checkBoxOptions: []
        };
    },
    computed: {},
    watch: {
        formType: {
            immediate: true,
            handler(n, v) {

                if (n === 'view') {
                    const id = this.$route.query.id
                    this.loadDetail(id)
                    this.disabled = true
                } else if (n === 'edit') {

                    const id = this.$route.query.id
                    this.form.personId = this.$route.query.id
                    this.loadDetail(id)
                }
            }
        }
    },
    methods: {
        handlerCancel() {
            this.$router.back()
        },
        loadDetail(id) {
            const $this = this
            SalesApi.getPersonDetail(id)
                .then(result => {
                    const { code, data } = result
                    if (code === 1) {
                        $this.form.personName = data.personName
                        $this.form.personId = data.personId
                        $this.form.personMobile = data.personMobile
                        $this.form.personAvatar = data.personAvatar
                        $this.form.personGender = data.personGender
                        $this.form.areaIds = data.areaList.map(f => f.areaId)
                        $this.form.personAvatarImg = data.personAvatarUrl
                    }
                })
        },
        openImage() {
            this.isProductUpload = true
        },
        returnProductImgsFunc(e) {
            if (e && e.length > 0) {
                this.imageInfo = {
                    imageId: e[0].fileId,
                    filePath: e[0].filePath
                }
                this.form.personAvatar = this.imageInfo.imageId
                this.form.personAvatarImg = this.imageInfo.filePath
                this.isProductUpload = false
            }
        },

        onSubmit() {
            const $this = this
            $this.$refs['form'].validate((valid) => {
                if (valid) {
                    $this.loading = true
                    if ($this.formType === 'add') {
                        SalesApi.addPerson(this.form, true)
                            .then(result => {
                                const { code, msg } = result
                                $this.loading = false
                                if (code === 1) {
                                    ElMessage.success({
                                        message: msg,
                                        type: 'success'
                                    })
                                    this.$router.back()
                                }
                            }).catch(error => {
                                $this.loading = false
                            })
                    } else {
                        SalesApi.updatePerson(this.form, true)
                            .then(result => {
                                const { code, msg } = result
                                $this.loading = false
                                if (code === 1) {
                                    ElMessage.success({
                                        message: msg,
                                        type: 'success'
                                    })
                                    this.$router.back()
                                }
                            }).catch(error => {
                                $this.loading = false
                            })
                    }

                }

            })


        },
        loadAreas() {
            const $this = this
            SalesApi.getAreaList()
                .then(result => {
                    const { code, data } = result
                    if (code === 1) {
                        data.forEach(item => {
                            const json = {
                                name: '',
                                areaName: item.areaName,
                                areaCode: item.areaCode,
                                appid: item.areaId
                            }
                            json.name = $this.convertAreas(item)
                            $this.checkBoxOptions.push(json)
                        })
                    }
                })

        },
        convertAreas(item) {
            const $this = this
            const provice = $this.defaultData.find(f => f.value === item.province)
            const areaValues = []
            if (provice) {
                areaValues.push(provice.label)
                if (provice.children && provice.children.length > 0) {
                    const city = provice.children.find(f => f.value === item.city)
                    if (city) {
                        areaValues.push(city.label)
                        if (city.children && city.children.length > 0) {
                            const dis = city.children.find(f => f.value === item.district)
                            if (dis) {
                                areaValues.push(dis.label)
                            }
                        }
                    }


                }
            }
            return areaValues.join('/')
        }

    },
    created() {

        this.loadAreas()
    },
    mounted() {

    },
}
</script>
<style scoped></style>